<!-- 树形导航 -->
<template>
	<div class="demo-tree">
		<el-tree
			:data="treeProps.data"
			node-key="id"
			default-expand-all
			:expand-on-click-node="false">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span @click="handleNodeClick(node, data)">
              <i v-if="data.pageType === 1" class="el-icon-document"></i>
              <i v-if="data.pageType === 2" class="el-icon-location-outline"></i>
              <i v-else-if="data.pageType === 3" class="el-icon-menu"></i>
              {{ data.pageName }}
            </span>
            <span v-if="data.pageType !== 3" class="btn-group">
              <el-button
								v-if="treeProps.action.indexOf('block') > -1"
								type="text"
								size="mini"
								@click="() => appendBlock(data)">
                添加资源位
              </el-button>
							<!-- <el-button
                                v-if="treeProps.action.indexOf('booth') > -1"
                                type="text"
                                size="mini"
                                @click="() => appendBooth(node, data)">
                添加展位
              </el-button> -->
                <el-button
									v-if="handleOfflineShow(data)"
									type="text"
									size="mini"
									@click="() => offline(node, data)">
                下线
              </el-button>
            </span>
          </span>
		</el-tree>
	</div>
</template>

<script>
	export default {
		name: "treeMenu",
		data() {
			return {}
		},
		props: {
			// data: 渲染的数据
			// action: 操作类型
			treeProps: {
				type: Object,
				default: () => {
					return {
						data: [],
						action: []
					}
				}
			}
		},
		created() {
		},
		mounted() {
		},
		methods: {
			// 下线状态显示
			handleOfflineShow(data) {
				let {requirementType} = data;
				return this.treeProps.action.indexOf('offline') > -1
					&& (requirementType === 0 || requirementType === 2);
			},
			// 添加区块位
			appendBlock(data) {
				let obj = {
					id: data.id,
					pageId: data.pageId,
					actionType: 2,
					imageUrl: data.imageUrl
				};
				this.$emit("selectedMenu", obj);
			},
			// 添加展位
			appendBooth(node, data) {
				let obj = {
					id: data.id,
					pageId: data.pageId,
					actionType: 3,
					imageUrl: data.imageUrl
				};
				this.$emit("selectedMenu", obj);
			},
			// 下线
			offline(node, data) {
				let obj = {
					id: data.id,
					pageId: data.pageId,
					actionType: "offline"
				};
				this.$emit("selectedMenu", obj);
			},
			//  点击节点
			handleNodeClick(node, data) {
				let {pageType} = data;
				let actionType = Number(pageType);
				let obj = {
					id: data.id,
					pageId: data.pageId,
					actionType
				};
				this.$emit("nodeClick", obj);
			}
		}
	}
</script>

<style scoped lang="scss">
	.custom-tree-node {
		padding-right: 0;

		.btn-group {
			display: none;
		}

		&:hover {
			.btn-group {
				display: inline;
			}
		}
	}

</style>
